import React, { useState, useEffect, useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import { putSccEvectionAddEvection } from '../../../../financialApi'
import {getSysUserSelected} from '../../../../../../Api/listUrl'
import { BusinessTravelType } from '../../../../../../assets/enum'
import moment from 'moment'
import { Button, Form, Input, Select, DatePicker, InputNumber, message } from 'antd'

const { Option } = Select;
const { TextArea } = Input;

/**
 * @description: 费用管理--出差申请表
 * @author: xiaoxujs
 * @update: xiaoxujs（2021-07-30）添加申请人
 */

const BusinessTravel = ({formData}) => {
    const history = useHistory()
    const [form] = Form.useForm()
    const {setFieldsValue} = form
    const [buttonLoading, setButtonLoading] = useState(false)
    const [userList, setUserList] = useState([])
    const userFun =  useCallback(
        () => {
            ;(async () => {
                const {code, msg, data} = await getSysUserSelected()
                if(code === '20000') {
                    setUserList(data)
                }else{
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        setFieldsValue(formData)
        userFun()
    }, [formData, setFieldsValue, userFun])
    const onFinish = (values) => {
        values.startTime = moment(values.startTime).format('YYYY-MM-DD')
        values.endTime = moment(values.endTime).format('YYYY-MM-DD')
        ; (async () => {
            setButtonLoading(true)
            const { code, msg } = await putSccEvectionAddEvection(values)
            if (code === '20000') {
                message.success('提交成功')
                setButtonLoading(false)
                history.go('-1')
            } else {
                setButtonLoading(false)
                message.error(msg)
            }
        })()
    };
    return <Form
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}
    >
        <Form.Item
            label="申请人"
            name="applicant"
            rules={[{ required: true, message: '请选择申请人!' }]}
        >
            <Select>
                {
                    userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                }
            </Select>
        </Form.Item>
        <Form.Item
            label="部门主管"
            name="director"
            rules={[{ required: true, message: '请选择部门主管!' }]}
        >
            <Select>
                {
                    userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                }
            </Select>
        </Form.Item>
        <Form.Item
            label="出差性质"
            name="nature"
            rules={[{ required: true, message: '请选择出差性质!' }]}
        >
            <Select>
                {
                    BusinessTravelType.map(item => <Option value={item.value} key={item.value}>{item.babel}</Option>)
                }
            </Select>
        </Form.Item>

        <Form.Item
            label="出发城市"
            name="startCity"
            rules={[{ required: true, message: '请输入出发城市!' }]}
        >
            <Input />
        </Form.Item>
        <Form.Item
            label="目的城市"
            name="endCity"
            rules={[{ required: true, message: '请输入目的城市!' }]}
        >
            <Input />
        </Form.Item>
        <Form.Item
            label="开始时间"
            name="startTime"
            rules={[{ required: true, message: '请选择开始时间!' }]}
        >
            <DatePicker />
        </Form.Item>
        <Form.Item
            label="结束时间"
            name="endTime"
            rules={[{ required: true, message: '请选择结束时间!' }]}
        >
            <DatePicker />
        </Form.Item>
        <Form.Item
            label="出差事由"
            name="matter"
            rules={[{ required: true, message: '请输入出差事由!' }]}
        >
            <TextArea />
        </Form.Item>
        <Form.Item
            label="申请金额（元）"
            name="money"
            rules={[{ required: true, message: '请输入申请金额!' }]}
        >
            <InputNumber />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" 
            loading={buttonLoading}
            >
                提交申请
            </Button>
        </Form.Item>
    </Form>
}

export default BusinessTravel